var box = document.querySelector('#box')
var ul = box.children[0]
var circle = document.querySelector('.circle')

var width = box.offsetWidth  // 屏幕宽度
var index = 0  // 当前在 索引为 0 的第一张图片上

var timer = setInterval(function() {
  index += 1

  var x =  - width * index
  ul.style.transform = 'translateX(' + x + 'px)'
  ul.style.transition = 'all .3s'
}, 2000)

//     transition 结束就执行这个函数
window.addEventListener('transitionend', function() {
  // 这就是一个函数
  function fn() {
    // 计算位置
    var x =  - width * index
    // 移动到指定位置
    ul.style.transform = 'translateX(' + x + 'px)'
    // 瞬间拉回道制定位置
    ul.style.transition = 'none'
  }

  // index 索引 代笔第几张图片
  if( index >= 3 ) {
    index = 0
    fn()
  } else if( index < 0 ) {
    index = 2
    fn()
  }

  // circle.querySelector('.active').className = ''

  circle.querySelector('.active').classList.remove('active')
  circle.children[index].classList.add('active')

})

var fingerX, moveX
ul.ontouchstart = function(e) {
  clearInterval(timer)
  fingerX = e.targetTouches[0].pageX
}

ul.ontouchmove = function(e) {
  moveX = e.targetTouches[0].pageX - fingerX

  var x =  - width * index + moveX
  ul.style.transform = 'translateX(' + x + 'px)'
  ul.style.transition = 'none'
}

ul.ontouchend = function() {
  if(moveX) {
    if(Math.abs(moveX) > 50) {  // 进行上一张或者下一张
      if(moveX > 0) {  // 上一张
        index -= 1
      } else {  // 下一张
        index += 1
      }
    } 
  
    var x =  - width * index
    ul.style.transform = 'translateX(' + x + 'px)'
    ul.style.transition = 'all .1s'
  }

  timer = setInterval(function() {
    index += 1
  
    var x =  - width * index
    ul.style.transform = 'translateX(' + x + 'px)'
    ul.style.transition = 'all .3s'
  }, 2000)

}

var test = document.querySelector('#top')
window.addEventListener('scroll', function() {
  if(window.pageYOffset > 800) {
    test.style.display = 'block'
  } else {
    test.style.display = 'none'
  }
})

test.onclick = function() {
  window.scrollTo(0, 0)
}